import dash
from dash import html, Input, Output, State, dcc
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Location(id='url'),

        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        html.Img(
                            src=dash.get_asset_url('logo.png'),
                            style={
                                'height': '50px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'padding': '7px 20px 7px 30px'
                        }
                    )
                ),

                fac.AntdCol(
                    html.Div(
                        fac.AntdText(
                            'XXX智能计算仿真平台',
                            className='title',
                            style={
                                'fontSize': '45px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'display': 'flex',
                            'alignItems': 'center'
                        }
                    )
                ),
            ],
            style={
                'height': '64px',
                'boxShadow': 'rgb(240, 241, 242) 0px 2px 14px',
                'background': 'white',
                'marginBottom': '5px',
                'position': 'sticky',
                'top': 0,
                'zIndex': 999
            }
        ),

        fac.AntdRow(
            [
                fac.AntdCol(
                    fac.AntdAffix(
                        html.Div(
                            fac.AntdMenu(
                                id='menu',
                                menuItems=[
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': '/home',
                                            'title': '首页',
                                            'href': '/home',
                                            'icon': 'antd-home'
                                        }
                                    },
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': '/page1',
                                            'title': '页面1',
                                            'href': '/page1'
                                        }
                                    },
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': '/page2',
                                            'title': '页面2',
                                            'href': '/page2'
                                        }
                                    }
                                ],
                                style={
                                    'width': '100%'
                                }
                            ),
                            style={
                                'width': '300px',
                                'height': 'calc(100vh - 69px)',
                                'overflowY': 'auto'
                            }
                        ),
                        offsetTop=69
                    ),
                    flex='none'
                ),

                fac.AntdCol(
                    html.Div(
                        id='page-content',
                        style={
                            'padding': '25px'
                        }
                    ),
                    flex='auto'
                ),

                fac.AntdBackTop(
                    duration=0.5
                )
            ],
            wrap=False
        )
    ]
)


@app.callback(
    Output('page-content', 'children'),
    Input('url', 'pathname')
)
def router(pathname):
    if pathname in ['/', '/home']:
        return fac.AntdResult(
            title='欢迎来到首页',
            subTitle='这是一段结果页示例文字说明',
            style={
                'boxShadow': 'rgb(107 147 224 / 14%) 0 6px 16px',
                'borderRadius': '12px',
                'margin': '20px 0px'
            }
        )
    elif pathname in ['/page1', '/page2']:
        return fac.AntdResult(
            title='欢迎来到' + pathname[1:],
            subTitle='这是一段结果页示例文字说明',
            style={
                'boxShadow': 'rgb(107 147 224 / 14%) 0 6px 16px',
                'borderRadius': '12px',
                'margin': '20px 0px'
            }
        )

    return fac.AntdResult(
        title='当前页面不存在！',
        subTitle='这是一段结果页示例文字说明',
        status='404',
        style={
            'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
            'borderRadius': '12px',
            'margin': '20px 0px'
        }
    )


@app.callback(
    Output('menu', 'currentKey'),
    Input('url', 'pathname')
)
def url_to_currentKey(pathname):
    if pathname == '/':
        pathname = '/home'

    return pathname


if __name__ == '__main__':
    app.run_server(debug=True)
